/*
    创建者：shuxiaokai
    创建时间：2021-09-10 22:44
    模块名称：预览界面
    备注：
*/
<template>
    <div class="params-view px-3">
        <s-fieldset :title="$t('请求参数')" class="mb-5">
            <template v-if="hasQueryParams">
                <div class="title">{{ $t("Query参数") }}</div>
                <s-params-view :data="apidocInfo.queryParams" plain class="mb-3"></s-params-view>
            </template>
            <template v-if="hasPathsParams">
                <div class="title">{{ $t("Path参数") }}</div>
                <s-params-view :data="apidocInfo.paths" plain class="mb-3"></s-params-view>
            </template>
            <template v-if="hasJsonBodyParams">
                <div class="title">{{ $t("Body参数") }}(application/json)</div>
                <s-json-editor :value="apidocInfo.requestBody.rawJson" read-only></s-json-editor>
                <!-- <s-params-view :data="apidocInfo.requestBody.json"></s-params-view> -->
            </template>
            <template v-if="hasFormDataParams">
                <div class="title">{{ $t("Body参数") }}(multipart/formdata)</div>
                <s-params-view :data="apidocInfo.requestBody.formdata" plain></s-params-view>
            </template>
            <template v-if="hasUrlEncodedParams">
                <div class="title">{{ $t("Body参数") }}(x-www-form-urlencoded)</div>
                <s-params-view :data="apidocInfo.requestBody.urlencoded" plain></s-params-view>
            </template>
            <template v-if="hasRawParams">
                <div class="title">{{ $t("Body参数") }}({{ apidocInfo.requestBody.raw.dataType }})</div>
                <pre>{{ apidocInfo.requestBody.raw.data }}</pre>
            </template>
            <div v-if="!hasQueryParams && !hasPathsParams && !hasJsonBodyParams && !hasFormDataParams && !hasUrlEncodedParams && !hasRawParams">{{ $t("暂无数据") }}</div>
        </s-fieldset>
        <s-fieldset :title="$t('返回参数')">
            <div v-for="(item, index) in apidocInfo.responseParams" :key="index" class="title">
                <div class="mb-2">
                    <span>{{ $t("名称") }}：</span>
                    <span>{{ item.title }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>{{ $t("状态码") }}：</span>
                    <span>{{ item.statusCode }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>{{ $t("返回格式") }}：</span>
                    <span>{{ item.value.dataType }}</span>
                </div>
                <s-params-view v-if="item.value.dataType === 'application/json'" :data="item.value.json"></s-params-view>
                <div v-if="item.value.dataType === 'application/xml' || item.value.dataType === 'text/plain' || item.value.dataType === 'text/html'" class="h-150px">
                    <s-raw-editor :data="item.value.json" :type="item.value.dataType" readonly></s-raw-editor>
                </div>
            </div>
        </s-fieldset>
        <s-fieldset :title="$t('请求头')"></s-fieldset>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
    data() {
        return {
        };
    },
    computed: {
        apidocInfo() {
            return this.$store.state["apidoc/apidoc"].apidoc.item
        },
        //是否存在查询参数
        hasQueryParams() {
            const { queryParams } = this.$store.state["apidoc/apidoc"].apidoc.item;
            const hasQueryParams = queryParams.filter(p => p.select).some((data) => data.key);
            return hasQueryParams;
        },
        //是否存在path参数
        hasPathsParams() {
            const { paths } = this.$store.state["apidoc/apidoc"].apidoc.item;
            const hasPathsParams = paths.some((data) => data.key);
            return hasPathsParams;
        },
        //是否存在body参数
        hasJsonBodyParams() {
            const { contentType } = this.$store.state["apidoc/apidoc"].apidoc.item;
            const { mode } = this.$store.state["apidoc/apidoc"].apidoc.item.requestBody;
            return contentType === "application/json" && mode === "json";
        },
        //是否存在formData参数
        hasFormDataParams() {
            const { contentType } = this.$store.state["apidoc/apidoc"].apidoc.item;
            return contentType === "multipart/form-data";
        },
        //是否存在formData参数
        hasUrlEncodedParams() {
            const { contentType } = this.$store.state["apidoc/apidoc"].apidoc.item;
            return contentType === "application/x-www-form-urlencoded";
        },
        //raw类型返回参数
        hasRawParams() {
            const { mode, raw } = this.$store.state["apidoc/apidoc"].apidoc.item.requestBody;
            return mode === "raw" && raw.data;
        },
        //返回参数个数
        // responseNum() {
        //     const { responseParams } = this.$store.state["apidoc/apidoc"].apidoc.item;
        //     let resNum = 0;
        //     responseParams.forEach(response => {
        //         const resValue = response.value;
        //         const { dataType } = resValue;
        //         if (dataType === "application/json") {
        //             const converJsonData = apidocConvertParamsToJsonData(resValue.json);
        //             const hasJsonData = converJsonData && Object.keys(converJsonData).length > 0
        //             if (hasJsonData) {
        //                 resNum ++;
        //             }
        //         } else if (dataType === "text/javascript" || dataType === "text/plain" || dataType === "text/html" || dataType === "application/xml") {
        //             if (resValue.text.length > 0) {
        //                 resNum ++;
        //             }
        //         } else {
        //             console.warn(`未实现的返回类型${dataType}`);
        //         }
        //     });
        //     return resNum;
        // },
        //是否存在headers
        hasHeaders() {
            const { headers } = this.$store.state["apidoc/apidoc"].apidoc.item;
            const hasHeaders = headers.filter(p => p.select).some((data) => data.key);
            return hasHeaders;
        },
    },
    methods: {
    },
})
</script>

<style lang="scss">
.params-view {
    .title {
        margin-bottom: size(10);
        font-size: fz(15);
    }
}
</style>
